<template>
  <view :class="classFlag ?'Switchmodel': 'hidecss'" class="wrap">
    <view class="swimg">
      <image :class="type === 'none' ? 'img' : 'bImg'" :src="'https://files.yzsheng.com/goodimg/brandimg/'+carInfo.bid+'.png'" mode="aspectFit" v-show="carInfo.bid"></image>
    </view>
    <view :class="type === 'none' ? 'bFont' : 'swnamebox'">
      <view class="swname">
        {{carInfo.brand}} {{ carInfo.cartypename }}
      </view>
      <view class="swname">
        {{carInfo.name}}
      </view>
      <view class="swname swname2" v-if="carInfo.vin">
        VIN：{{ carInfo.vin }}
      </view>
    </view>
    <view class="qiehuancar" @click="switchmodel" v-if="type === 'qiehuan'">
      <i-icon icon="iconshuaxin" type="single" size="40rpx" color="#666"></i-icon>
      <view class="qiehname">
        切换车型
      </view>
    </view>
    <view v-else-if="type === 'next'" class="next-icon" @click='gotoDetail'>
      <u-icon name="arrow-right" color="#999" size="26rpx"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    carInfo: {
      type: Object,
      default(){
        return {}
      }
    },
    classFlag: {
      type: Boolean,
      default() {
        return false;
      }
    },
    type: { //none 新建询价 next qiehuan 选择类别
      type: String,
      default() {
        return 'none';
      }
    }
  },
  methods: {
    //切换车型
    switchmodel() {
      uni.navigateTo({
        url: '/pages_findAccessory/selectCarModel/selectCarModel?type=1'
      })
    },

    //跳转询件详情
    gotoDetail(){
      uni.navigateTo({
        url: '/pages_findAccessory/myInquiryDetail/myInquiryDetail?id=' + this.carInfo.inquiryId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin danhang1() {
  /* 单行...*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 切换车型 */
.Switchmodel {
  //top: 100rpx;
}

.hidecss {
  //top: -80rpx;
}

.wrap {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  padding: 25rpx;
  display: flex;
  z-index: 1;
  //position: absolute;
  //transition: all 0.5s;

  .swimg {
    padding-right: 18rpx;
    .img {
      width: 66rpx;
      height: 66rpx;
    }

    .bImg {
      width: 120rpx;
      height: 120rpx;
    }

  }

  .bFont {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 30rpx;
    margin-left: 24rpx;
    color: #333333;
    font-weight: 500;
    overflow: hidden;
  }
  .swnamebox {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
  }

  .swname {
    width: 95%;
    @include danhang1;
  }

  .swname2 {
    font-size: 24rpx;
    font-weight: 500;
    color: #999999;
    margin-top: 10rpx;
  }

  .qiehuancar {
    width: 182rpx;
    text-align: center;
    border-left: 1rpx solid #EEEEEE;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15rpx 0;
    .qiehname {
      font-size: 26rpx;
      color: #666;
      width: 182rpx;
    }
  }

  .next-icon {
    text-align: center;
    margin: auto 0;
  }
}
</style>